<template>
  <div class="goodsitem">
    <van-image :src="goodsItem.image">
      <template v-slot:loading lazy-load>
        <van-loading type="spinner" size="60" />
      </template>
      <template v-slot:error>加载失败</template>
    </van-image>
    <div class="goods-dsc">
      <p>{{ goodsItem.title }}</p>
      <van-cell center>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <div class="left">
            <span class="goods-price">￥{{ goodsItem.price }}</span>
          </div>
        </template>
        <template #right-icon>
          <div class="right">
            <van-icon name="star-o" class="star-icon" />
            <span>{{ goodsItem.cfav }}</span>
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "vantgoodsitem",
  props: {
    goodsItem: Object,
  },
  methods: {
    itemclick() {
      this.$router.push({
        path: "/detail",
        query: {
          id: this.goodsItem.iid,
        },
      });
    },
    goodsitemload() {
      this.$bus.$emit("goodsitemload");
    },
  },
};
</script>

<style scoped>
.goodsitem {
  width: 50%;
  padding: 0 8px;
  overflow: hidden;
}

.goods-dsc {
  padding-bottom: 5px;
  text-align: center;
}
.goods-dsc p {
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods-dsc span {
  position: relative;
  top: 0.5px;
}
.goods-price {
  color: red;
}
.goods-dsc .left,
.right {
  margin: 0 6px;
}
</style>